<script setup lang="ts">
import lottie from 'lottie-web';
import { onMounted, onUnmounted, useTemplateRef } from 'vue';

const animationSpeed = 1;

const usingRef = useTemplateRef('using');
onMounted(() => {
    const animation = lottie.loadAnimation({
        container: usingRef.value!, // 绑定dom节点
        renderer: 'svg', // 渲染方式:svg、canvas
        loop: true, // 是否循环播放，默认：false
        autoplay: true, // 是否自动播放, 默认true
        // AE动画使用bodymovie导出为json数据
        // animationData:
    });

    animation.setSpeed(animationSpeed);
    animation.play();
    onUnmounted(() => {
        animation.destroy();
    });
});
</script>
<template>
    <div class="using" ref="using" />
</template>

<style lang="scss" scoped>
.using {
    height: 400px;
}
</style>
